<template>
  <view class="data-card-progress"
        @click.stop="onTableClick"
        @dblclick="onDblClick"
        style="background: white"
        v-if="options && options.seriesSetting">
    <u-image class="data-card-image"
             v-if="options.seriesSetting.icon"
             :src="options.seriesSetting.icon"
             :height="options.seriesSetting.iconSize + 'px'"
             :width="options.seriesSetting.iconSize + 'px'"
             shape="square"
             :borderRadius="options.seriesSetting.iconRadius + 'px'"/>
    <view class="data-card-title" :style="{
					bold: options.seriesSetting.mainTextStyle.bold,
					italics: options.seriesSetting.mainTextStyle.italics,
					color: options.seriesSetting.mainTextStyle.color,
					fontStyle: options.seriesSetting.mainTextStyle.italics ?
						'italic' : undefined,
					fontWeight: options.seriesSetting.mainTextStyle.bold ?
						'bold' : undefined,
					fontSize: options.seriesSetting.mainTextStyle.fontSize + 'px'
				}">
      {{ getDataString("mainTextColumn", "卡片标题") }}
    </view>
    <view class="data-card-number" :style="{
					bold: options.seriesSetting.numTextStyle.bold,
					italics: options.seriesSetting.numTextStyle.italics,
					color: options.seriesSetting.numTextStyle.color,
					fontStyle: options.seriesSetting.numTextStyle.italics ?
						'italic' : undefined,
					fontWeight: options.seriesSetting.numTextStyle.bold ?
						'bold' : undefined,
					fontSize: options.seriesSetting.numTextStyle.fontSize + 'px'
				}">
      {{ getDataString("numTextColumn") }}
    </view>
    <view class="data-card-footer">
      <u-line-progress :percent="percentage" style="flex-grow: 1;" :show-percent="false" :striped="true"
                       :striped-active="true" :active-color="options.seriesSetting.progress.color"></u-line-progress>
      <view class="progress-text" v-if="options && !options.seriesSetting.progress.textInside" :style="{color: options.seriesSetting.progress.textStyle.color,
					width: options.seriesSetting.progress.textStyle.width + 'px',
					'font-size': options.seriesSetting.progress.textStyle.fontSize + 'px',
					'font-weight': options.seriesSetting.progress.textStyle.bold ?
						600 : undefined,
					'font-style': options.seriesSetting.progress.textStyle.italics ?
						'italic' : undefined}">
        <view class="text" v-html="outerTextFormat(percentage)"></view>
      </view>
    </view>
  </view>
</template>

<script>
import chartMixins from './chartMixins.js';

export default {
  name: 'dataCard',
  props: {
    // 透视表数据
    data: {
      type: [Object, Array]
    },
    // 透视表高度
    height: {
      type: String
    },
    // 透视表设置
    options: {
      type: Object
    },
    widget: {
      type: Object
    },
    textColumn: {
      type: Array
    }
  },
  mixins: [chartMixins],
  components: {},
  data() {
    return {};
  },
  methods: {
    onTableClick() {
      this.$emit('click');
    },
    onDblClick() {
      this.$emit('dblclick', this.dataObject);
    },
    getTextStyle(textStyleName) {
      return {
        ...this.options.seriesSetting[textStyleName],
        fontStyle: this.options.seriesSetting[textStyleName].italics ?
            'italic' : undefined,
        fontWeight: this.options.seriesSetting[textStyleName].bold ?
            'bold' : undefined,
        fontSize: this.options.seriesSetting[textStyleName].fontSize + 'px'
      };
    },
    textFormat(percentage) {
      if (!this.options.seriesSetting.progress.textInside) return '';

      return this.options.seriesSetting.progress.textStyle.text.replace(
          '{percent}',
          percentage
      );
    },
    outerTextFormat(percentage) {
      return this.options.seriesSetting.progress.textStyle.text.replace(
          /\{percent\}/gi,
          percentage
      );
    }
  },
  computed: {
    title() {
      if (
          this.options == null ||
          this.options.title == null ||
          !this.options.title.show
      ) {
        return undefined;
      }
      return this.options ? this.options.title.text : undefined;
    },
    percentage() {
      if (!this.getDataPropertyName('progressColumn')) return 0;
      return (
          Number(
              (
                  this.getDataNumber('progressColumn') /
                  this.options.seriesSetting.progress.maxValue
              ).toFixed(2)
          ) * 100
      );
    }
  }
};
</script>

<style scoped>
.data-card-progress {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 220rpx;
  cursor: pointer;
}

.data-card-number {
  line-height: 2.0;
  text-align: left;
  flex-grow: 1;
  flex-shrink: 0;
  height: 80rpx;
}

.data-card-title {
  flex-grow: 0;
  flex-shrink: 0;
}

.data-card-footer {
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.data-card-image {
  position: absolute;
  top: 0px;
  right: 0px;
}

.progress-text {
  text-align: right;
}
</style>
